<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="mesh-model-tree__main">
    <div class="header">
      <h3 class="head-title"><span class="title">处理报告</span></h3>
      <div class="upload-statistic">
        本次共选择 <el-link type="primary">{{ countVo?.totalCount || 0 }}</el-link> 笔文件；
        被过滤的文件 <el-link type="danger" @click="showFilterFiles">{{ countVo?.filterCount || 0 }}</el-link> 笔；
        已处理的文件 <el-link type="success">{{ countVo?.notFilterCount || 0 }}</el-link> 笔，处理的文件具体信息如下：
      </div>
      <h3 class="head-title"><span class="title">处理结果</span></h3>
    </div>
    <div class="model-batch">
      <label for="">机型：</label><span style="margin-right: 20px;">{{ formData?.modelNumber }}</span>
      <label for="">批次：</label><span style="margin-right: 20px;">{{ formData?.batchNumber }}</span>
      <label for="">轮次：</label><span style="margin-right: 20px;">{{ formData?.roundNumber }}</span>
      <label for="">适用部段：</label><span style="margin-right: 20px;">{{ formData?.sectionNumbersName }}</span>
      <label for="">备注：</label><span>{{ formData?.remarks }}</span>
    </div>
    <div class="delete-file">
      <el-button size="small" type="primary" @click="batchDelete">批量移除</el-button>
    </div>
    <div class="upload-result">
      <el-table :data="tableData" :height="tableHeight" @selection-change="handleSelectionChange">
        <el-table-column type="selection" fixed="left" width="100" />
        <el-table-column type="index" label="序号" fixed="left" width="100" />
        <el-table-column prop="fullName" label="OP2文件名称">
          <template #default="scope">
            <span>{{ scope.row?.isfdLargeFileVo?.fileName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="fileSizeWithUnit" label="文件大小">
          <template #default="scope">
            <span>{{ scope.row?.isfdLargeFileVo?.fileSizeWithUnit }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="sectionName" label="部段名称">
        </el-table-column>
        <el-table-column prop="batchNumber" label="所属批次" width="100"></el-table-column>
        <el-table-column prop="modelNumber" label="所属机型" width="80"></el-table-column> -->
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <div>
              <el-button size="small" link type="primary" @click="handleTable('del', scope.row, scope.$index)">移除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script name="FileTree" setup>
import { updatePart } from '@/api/elementsLibrary';
const props = defineProps(['active', 'data']);
const emit = defineEmits(['change', 'handleEvent']);
const zipData = ref(props?.data);
const fileVisible = ref(false);
const filterFiles = ref([]);
const formData = ref({});
const modifyVisible = ref(false);
const defaultProps = { children: 'children', label: 'name' };
const queryParams = ref({ modelNumber: '',batchNumber: '', sectionNumber: '', childSectionNumber: '' });
const currentData = ref(null);
const nodeData = ref(null);
const currentNodeKey = ref(2);
const refTree = ref();
const treeList = ref({});
const tableData = ref([]);
const countVo = ref({});
const initTableData = ref([]);
//修改过的数据id集合
const modifyIds = ref([]);
const selection = [];
// 通知父组件data已修改
const change = () => {
  emit('change', { changeData: zipData.value ,modifyDataIds:modifyIds.value});
};
const tableHeight = computed(() => {
  return 'calc(100% - 10px)';
});
const handleSelectionChange = (val) => {
  selection = val;
}
const batchDelete = () => {
  if (!selection || selection.length == 0) {
    ElMessage({ showClose: true, message: '请选择文件', type: 'error' });
    return; 
  }
  let allHash = table.value.map(item => item.isfdLargeFileVo.fileHash);
  ElMessageBox.confirm('数据移除后不会被导入，请确认是否移除？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    tableData.value = tableData.value.filter(item => !allHash.includes(item.fileHash));
  });
}
const handleData = (res, files, uploadForm) => {
  tableData.value = res.isfdMeshOp2CollectVoList;
  formData.value = uploadForm;
  countVo.value = res;
};
const showFilterFiles = () => {
  filterFiles.value = initTableData.value.filter(item => item.filtered == 1);
  fileVisible.value = true;
}
const handleTable = (type, row, index) => {
  if (type === 'edit') {
    modifyVisible.value = true;
    // formData.value.version = data.versionNumber;
    // formData.value.partNum = data.partNumber;
  }
  if (type === 'del') {
    ElMessageBox.confirm('数据移除后不会被导入，请确认是否移除？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      tableData.value.splice(index, 1);
    });
  }
};
const initData = () => {

}
onMounted(() => {
  initData();
});
defineExpose({
  handleData,
  tableData
});
</script>
<style lang="scss" scoped>
.mesh-model-tree__main {
  width: 100%;
  height: 100%;
  padding: 10px;
  .upload-statistic {
    // font-size: 14px;
  }
  .node-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 210px;
  }
  .head-title {
    .title {
      font-size: 18px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      &::before {
        content: "";
        display: inline-block;
        width: 5px;
        height: 16px;
        margin-right: 5px;
        background-color: #409EFF;
        vertical-align: middle;
        margin-top: -3px;
      }
    }
  }
  .upload-result {
    display: flex;
    width: 100%;
    height: calc(100% - 74px);
    font-size: 12px;
    .left {
      width: 300px;
      height: 100%;
      overflow: auto;
      // &.fourth-step {
      //   height: calc(100% - 74px);
      // }
      .title {
        margin-bottom: 5px;
      }
      .custom-tree-node {
        display: flex;
        .icon-class {
          color: #ffcc66;
          font-size: 120%;
        }
        .node-title {
          padding-left: 5px;
          font-size: 12px;
          .modify_class {
            font-size: 12px;
            color: #409eff;
          }
        }
      }
    }
    .split {
      height: 100%;
      width: 2px;
      background: #dcdfe6;
      margin-right: 8px;
      margin-top: 20px;
      height: 100%;
      overflow: hidden;
    }
    .right {
      padding: 4px;
      width: calc(100% - 300px);
      height: 100%;
      // overflow: auto;
      .title {
        margin-bottom: 5px;
      }
    }
  }
}
</style>